<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css默认重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入less样式 -->
    <link rel="stylesheet/less" href="./css/less.less">
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 引入wow样式 -->
    <link rel="stylesheet" href="./css/animate.min.css">
    <!-- 引入swiper样式 -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 导航 -->
    <div class="header navbar-fixed-top">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand wow fadeInLeft" href="#">SPIRIT8</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active wow fadeInUp" data-wow-delay="0ms"><a href="#">HOME</a></li>
                                <li class="wow fadeInUp" data-wow-delay="100ms"><a href="#">ABOUT</a></li>
                                <li class="wow fadeInUp" data-wow-delay="200ms"><a href="#">SERVICES</a></li>
                                <li class="wow fadeInUp" data-wow-delay="300ms"><a href="#">PORTFOLIO</a></li>
                                <li class="wow fadeInUp" data-wow-delay="400ms"><a href="#">TESTMONIALS</a></li>
                                <li class="wow fadeInUp" data-wow-delay="500ms"><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

    </div>

    <!-- 背景图 -->
    <div class="banner">
        <video autoplay id="background" muted width="100%" loop>
            <source src="./img/banner.mp4">
        </video>
    </div>

    <!-- about us -->
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="main-left wow fadeInLeft">
                        <img src="./img/33-spirit8 digital agency copy.png">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="main-right wow fadeInDown">
                        <div class="main-top">About us</div>
                        <div class="main-title">
                            <span>SOME</span>
                            <span>WORDS</span>
                            <span>ABOUT US</span>
                        </div>
                        <div class="main-font">
                            <p>We love buliding brands through our</p>
                            <p>specific skills.Using colour,fonts,and illustration,we</p>
                            <p>brand companies in a way they will never forget.</p>
                        </div>
                        <div class="main-list">
                            <ul>
                                <li>Mission - We deliver uniqueness and quality</li>
                                <li>Skills - Delivering fast and excellent results</li>
                                <li>Clients - Satisfied clients thanks to our experience</li>
                            </ul>
                        </div>
                        <div class="main-btn">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span>BROWSE OUR WORK</span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- meet our team -->
    <div class="menu">
        <div class="container">
            <div class="row">
                <div class="menu-title wow fadeInDown">
                    <div>MEET</div>
                    <div>OUR TEAM</div>
                </div>
                <div>
                    <img src="./img/border.png" class="center-block">
                </div>

                <div class="menu-top">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo ">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                    <div class="menu-box wow fadeInLeft">
                                        <div class="photo">
                                            <img src="./img/logo.jpg" alt="">
                                        </div>
                                        <div class="menu-font">
                                            <div>Jason Statham</div>
                                            <div>Knife designer</div>
                                        </div>
                                        <div class="menu-list">
                                            <ul>
                                                <li>Do not seek to change what has come</li>
                                                <li>before.Seek to create that which has</li>
                                                <li>not.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

            </div>
        </div>


    </div>
    <!-- take a look at our services -->
    <div class="content">
        <div class="content-title wow fadeInDown">
            <p>take a look at our services</p>
        </div>
        <div class="wow fadeInUp">
            <img src="./img/1.gif" class="center-block">
        </div>
        <div class="content-font wow fadeInDown">
            <div>Lorem Ipsum comes from sections 1.10.32 of "de Finibus Bonorum et Malorum"</div>
            <div>This book is a treatise on the theory of ethics,very popular during</div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content-box wow fadeInDown">
                        <div><img src="./img/2.gif" class="center-block" alt=""></div>
                        <div class="content-top">Web design</div>
                        <div class="content-list">
                            <ul>
                                <li>The first line of Lorem Ipsum,"Lorem</li>
                                <li>ipsum dolor sit amet..",comes from a</li>
                                <li>line in section 1.10.32</li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content-box wow fadeInDown">
                        <div><img src="./img/3.gif" class="center-block" alt=""></div>
                        <div class="content-top">Mobile design</div>
                        <div class="content-list">
                            <ul>
                                <li>The first line of Lorem Ipsum,"Lorem</li>
                                <li>ipsum dolor sit amet..",comes from a</li>
                                <li>line in section 1.10.32</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content-box wow fadeInDown">
                        <div><img src="./img/4.gif" class="center-block" alt=""></div>
                        <div class="content-top">Photograpy</div>
                        <div class="content-list">
                            <ul>
                                <li>The first line of Lorem Ipsum,"Lorem</li>
                                <li>ipsum dolor sit amet..",comes from a</li>
                                <li>line in section 1.10.32</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="content-box wow fadeInDown">
                        <div><img src="./img/5.png" class="center-block" alt=""></div>
                        <div class="content-top">Web design</div>
                        <div class="content-list">
                            <ul>
                                <li>The first line of Lorem Ipsum,"Lorem</li>
                                <li>ipsum dolor sit amet..",comes from a</li>
                                <li>line in section 1.10.32</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="themes">
        <p>SOME OF OUR CLIENTS</p>
        <img src="./img/33-spirit8+digital+agency.png" class="center-block">
        <div>
            <span>CHANEL</span>
            <span>ZARA</span>
            <span>GUERLAIN</span>
            <span>LANCOME</span>
            <span>LACOSTE</span>
        </div>
    </div>


    <div class="submenu">
        <div class="submenu-title wow fadeInDown">take a look at our work</div>
        <div class="wow fadeInUp">
            <img src="./img/1.gif" class="center-block">
        </div>
        <div class="submenu-font">
            <div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" The Extremes of
                Good and Evil by Cicero,written in 45 BC.This book</div>
            <div>is a treatise on the theory of ethics,very popular during the Renaissance. Thefirst line of Lorem
                Ipsum,"Lorem Ipsum dolor sit amet..",comes from a line in sec-
            </div>
            <div>tion 1.10.32.</div>
        </div>
        <div class="container">
            <div class="row">
                <div class="submenu-nav">
                    <div class="navbar-left">Filter by type</div>
                    <div class="navbar-right">
                        <ul>
                            <li>All |</li>
                            <li>Web desigh |</li>
                            <li>Mobile design |</li>
                            <li>Photograpy</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="container">
            <div class="row">
                <div class="work-img">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="100ms">
                            <img src="./img/work-img1.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="200ms">
                            <img src="./img/work-img1.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="300ms">
                            <img src="./img/work-img1.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="400ms">
                            <img src="./img/work-img1.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                </div>
                <div class="work-img">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInDown" data-wow-delay="100ms">
                            <img src="./img/work-img2.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInDown" data-wow-delay="200ms">
                            <img src="./img/work-img2.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInDown" data-wow-delay="300ms">
                            <img src="./img/work-img2.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInDown" data-wow-delay="400ms">
                            <img src="./img/work-img2.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                </div>

                <div class="work-img">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="100ms">
                            <img src="./img/work-img3.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="200ms">
                            <img src="./img/work-img3.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="300ms">
                            <img src="./img/work-img3.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="work-box wow fadeInUp" data-wow-delay="400ms">
                            <img src="./img/work-img3.png" alt="">
                            <div class="work-bg">
                                Trend and fashion
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>


    <div class="themes2">
        <span>our clients’ testimonials</span>
        <img src="./img/33-spirit8+digital+agency.png" class="center-block">
        <div>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
            Lorem </div>
        <div>Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
        <div>Dean Martin, CEO Acme Inc.</div>
    </div>

    <div class="form">
        <div class="form-title wow fadeInDown">feel free to contact us</div>
        <img src="./img/1.gif" alt="" class="center-block wow fadeInUp">
        <div class="text">
            <ul>
                <li> Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                    Extremes of </li>
                <li>Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular </li>
                <li>during the Renaissance. </li>
            </ul>

        </div>

        <div class="container">
            <div class="row">
                <!-- 左右边输入框 -->
                <div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 wow fadeInDown">
                        <div class="form-left">
                            <span>Name</span>
                            <span>*</span>
                        </div>
                        <input type="text" class="input">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 wow fadeInDown">
                        <div class="form-right">
                            <span>Email address</span>
                            <span>*</span>
                        </div>
                        <input type="text" class="input">
                    </div>
                </div>
                <!-- 文本 -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wow fadeInDown">
                    <div class="form-bottom">
                        <span>Message</span>
                        <span>*</span>
                    </div>
                    <input type="text" class="menu-form">
                </div>
                <!-- 按钮 -->
                <div class="form-btn">SEND</div>
            </div>
        </div>

       

    </div>
    
    </div>
     <!-- 底部 -->
     <div class="footer">
        
     </div>
</body>
<!-- 引入less的js文档 -->
<script src="./js//less.js"></script>
<!-- 引入bootstrap的js文档 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入jquery文档 -->
<script src="./js/jquery.js"></script>
<!-- 引入wow.js文档 -->
<script src="./js/wow.min.js"></script>
<!-- 引入循环js -->
<script src="./js/loop.js"></script>
<!-- 引入swiperjs -->
<script src="./js/swiper-bundle.min.js"></script>
<script>
    var Video = document.querySelector('video')
    Video.defaultPlaybackRate = 8.0;
    Video.play();
    Video.playbackRate = 8.0;
    // 初始化wow.js
    new WOW().init();

    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    })  
</script>

</html>